<template>
  <div class="mgl-editor">
    <froala ref="editor" :tag="'textarea'"  :config="_config" v-model="content" ></froala>
  </div>
</template>

<script>
import VueFroala from "../vue-froala";


export default {
  name: "mgl-editor",
  components: {
    VueFroala
  },
  props: {
    index:{  default: 0 },
    config: {
      type: Object,
      default() {
        return {};
      }
    },
    value: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      randomId: "editor_" + Math.random() * 10000,
      $editor: null,
      content: this.value,
      appId: this.$store.state.sys.appId

    };
  },
  watch: {
    content(newValue) {
      this.$emit("input", newValue);
    }
  },
  computed: {
    _config() {
      return {
        ...this.config,
        fontFamily: {
          "menksoft2012,Consolas, Monaco,'Bitstream Vera Sans Mono','Courier New',微软雅黑, Courier,monospace":
            "menksoft2012",
          ...this.config.fontFamily
        }
      };
    }
  },
  mounted() {
    if (!this.$editor) {
      this.$editor = this.$refs.editor.$editor;
      this.$editor.$wp.css("overflow", "hidden");
      this.$emit('ready', this, this.index)
      // const frView = this.$editor.$el;
      // erd.listenTo(this.$editor.$wp[0], element => {
      //   frView.innerWidth(element.offsetWidth);
      // });
      // frView.innerWidth(this.$editor.$wp.innerWidth());
    }
  },
  methods: {
    initEvents() {},
    getContent(){
      return this.content
    },
    onResize(e) {
      //console.log("onResize", e.offsetWidth, e.offsetHeight);
    }
  }
};
</script>



<style lang="less">

  @font-face {
    font-family: 'menksoft2012';
    src: url('../../assets/fonts/menksoft2012.eot');
    src: local("?"),
    url('../../assets/fonts/menksoft2012.eot?#iefix') format('embedded-opentype'),
    url('../../assets/fonts/menksoft2012.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }

  .mgl() {
    font-family: 'menksoft2012', "Consolas", "Monaco", "Bitstream Vera Sans Mono", "Courier New", '微软雅黑', 'Courier', 'monospace';
    -moz-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
    -webkit-writing-mode: vertical-lr;
    -o-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    -webkit-text-orientation: sideways-right;
  }


  .mgl-editor {
    .fr-wrapper {
      overflow: hidden;
    }

    .fr-box.fr-basic .fr-view {
      .mgl;
      min-height: 500px;
      overflow-x: auto;
      font-size: 24px;
      word-spacing: 2px;
      line-height: 1.2;
      width: 100%;

      p {
        text-indent: 20px;
        margin: 0;
        margin-right: 20px;
      }
    }

    .fr-placeholder {
      .mgl;
    }
  }
</style>
